<template>
  <view class="modify-phone-container">
    <!-- 修改手机号 -->
    <view class="section line">
      <view class="section-header">
        <text class="section-title">修改手机号</text>
        <view class="modify" @click="modifyPhone">
			<text class="phone-number">130*****00</text>
			<uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
		</view>
      </view>
      <view class="section-content">
        <text class="tip">修改成功后，可通过新手机号登录账号招聘</text>
      </view>
    </view>

    <!-- 注销账号 -->
    <view class="section">
      <button class="cancel-button" @click="cancelAccount">注销账号</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 修改手机号
    modifyPhone() {
      uni.showToast({
        title: "修改手机号",
        icon: "none",
      });
      // 这里可以跳转到修改手机号的页面
      uni.navigateTo({
        url: "/pages/form/company-info/change-phone",
      });
    },
    // 注销账号
    cancelAccount() {
      uni.showToast({
        title: "注销账号",
        icon: "none",
      });
    uni.navigateTo({
             url: "/pages/enterprise/personal-center/delete-account",
           });
    },
  },
};
</script>

<style scoped>
.modify-phone-container {
	height: 844px;
  padding: 20px;
  background-color: #fff;
}

/* 每个功能模块 */
.section {
  padding: 10px;
  margin-bottom: 10px;
}

.line{
	border-bottom: 1px solid #ebebeb;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  color: #333;
}

.phone-number {
  font-size: 14px;
  color: #999;
}

.section-content {
  margin-bottom: 20px;
}

.tip {
  font-size: 12px;
  color: #999;
}

.modify {
  width: 70px;
  color: #fff;
  font-size: 9px;
  text-align: center;
}

/* 注销账号按钮 */
.cancel-button {
  width: 100%;
  color: #999;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
    position: fixed; /* 固定在页面底部 */
    bottom: 50px; /* 距离底部50px */
    left: 0;
    padding: 20px; /* 添加内边距，避免按钮紧贴边缘 */
}

.cancel-button::after{
	border: none;
}
</style>